class Hello extends React.Component {
  render() {
    return <div className="🚀">Hello {this.props.toWhat} <button onClick={() => window.location.reload()}>🚀再来一局</button></div>;
  }
}

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: props.x,
      y: props.y,
    };
  }
  render() {
    return (
      <button
        className="square"
        onClick = {() => this.props.onClick()}
        >
          {this.props.value}
        </button>
    );
  }
}

class UIBoard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: 0,
      board: new Array(15*15),
      first: -1
    }
  }

  render() {
    let squares = [];
    for (let i = 0; i < 15; i++) {
      for (let j = 0; j < 15; j++) {
        squares.push(<Square x={j} y={i} key={i * 15 + j} value={this.state.board[i * 15 + j]} onClick={() => this.lokiloli(j, i)}/>);
      }
    }
    return (<div className="board">{squares}</div>);
  }

  lokiloli(x:number, y: number) {
    // console.log(x, y);
    if (this.state.term % 2 == this.state.first % 2) { return; }
    if (this.state.board[y * 15 + x]) { return; }

    let slice = this.state.board.slice()
    slice[y * 15 + x] = '❀';

    window.alphaBeta.makeNextMove({x, y}, window.alphaBeta.depth % 2 + 1);

    alphaBeta.boogiepop.evaluate(window.alphaBeta.board.human, window.alphaBeta.board.computer);
    if (alphaBeta.boogiepop.isend) {
      alert('❀ win');
      return;
    }

    window.alphaBeta.alphaBeta(3, -0x3f3f3f3f, 0x3f3f3f3f);

    x = window.alphaBeta.next.x;
    y = window.alphaBeta.next.y;
    slice[y * 15 + x] = '🤖';
    window.alphaBeta.makeNextMove({x, y}, window.alphaBeta.depth % 2);

    alphaBeta.boogiepop.evaluate(window.alphaBeta.board.computer, window.alphaBeta.board.human);
    if (alphaBeta.boogiepop.isend) {
      alert('🤖 win');
    }

    this.setState({
      term: this.state.term + 2,
      board: slice,
    });
  }
}

ReactDOM.render(
  <div><Hello toWhat="World" /><UIBoard /></div>,
  document.getElementById("❤")
);